<template>
  <ContentWrap>
    <data-table
      :options="options"
      :query="query"
      @on-add="handleAdd(formRef)"
      @on-edit="handleEdit"
      ref="table"
    >
      <template #search>
        <el-input
          class="filter-item"
          v-model="query.params.dataSourceType"
          placeholder="数据来源类型"
        />
        <el-input class="filter-item" v-model="query.params.location" placeholder="数据采集地点" />
      </template>

      <template #columns>
        <el-table-column type="selection" width="50px" />
        <el-table-column prop="dataSourceType" label="数据来源类型" />
        <el-table-column prop="sensorId" label="传感器ID" />
        <el-table-column prop="time" label="数据采集时间" />
        <el-table-column prop="location" label="数据采集地点" />
        <el-table-column prop="parameterType" label="参数类型" />
        <el-table-column prop="value" label="数据值" />
      </template>
    </data-table>

    <el-dialog v-model="dialogVisible" title="数据收集模块" width="50%" :before-close="handleClose">
      <el-form :model="form" ref="formRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数据来源类型" prop="dataSourceType">
              <el-input v-model="form.dataSourceType" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器ID" prop="sensorId">
              <el-input v-model="form.sensorId" autocomplete="off" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="数据采集地点" prop="location">
              <el-input v-model="form.location" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数类型" prop="parameterType">
              <el-input v-model="form.parameterType" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据值" prop="value">
              <el-input v-model="form.value" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave(formRef)">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ContentWrap } from '@/components/ContentWrap'
import { DataTable } from '@/components/DataTable'
import { ref, reactive, unref } from 'vue'
import type { OptionsType, TableQueryType } from '@/components/DataTable/src/types'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { saveApi, detailApi } from '@/api/construction/gather'
import type { GatherDataType } from './types'

// 表格查询参数
let query = ref<TableQueryType>({
  current: 1,
  size: 10,
  params: {
    dataSourceType: '',
    location: ''
  }
})

// 表格默认参数
let options = ref<OptionsType>({
  listUrl: '/api/construction/gather/paging',
  delUrl: '/api/construction/gather/delete',
  add: {
    enable: true
    //permission: ['sys:user:add']
  },
  edit: {
    enable: true
    //permission: ['sys:user:edit']
  },
  del: {
    enable: true
    //permission: ['sys:user:delete']
  }
})

const table = ref()
const dialogVisible = ref(false)
const form = ref<GatherDataType>({})
const formRef = ref<FormInstance>()
// const rules = reactive<FormRules>({
//   roleName: [
//     {
//       required: true,
//       message: '角色名称必须输入',
//       trigger: 'blur'
//     }
//   ],
//   dataScope: [
//     {
//       required: true,
//       message: '数据权限必须选择',
//       trigger: 'blur'
//     }
//   ],
//   roleLevel: [
//     {
//       required: true,
//       message: '角色级别不能为空',
//       trigger: 'blur'
//     }
//   ]
// })

const handleAdd = (formEl: FormInstance | undefined) => {
  dialogVisible.value = true
  form.value = {}
  formEl?.resetFields()
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleEdit = (row: any) => {
  detailApi({ id: row.id }).then((res) => {
    // 数据
    form.value = res.data
  })
  dialogVisible.value = true
}

const handleSave = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  const formData = unref(form)
  saveApi(formData).then(() => {
    ElMessage({
      showClose: true,
      message: '操作成功！',
      type: 'success'
    })
    // 刷新表格
    table.value.reload()
    dialogVisible.value = false
  })
}
</script>
